<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>列表渲染</title>
  <script src="./vue.js"></script>
</head>
<body>
  <div id="root">
    <template v-for="(item,index) of userObj">
      <div>{{item}}</div>
      <!-- <span>{{index}}</span> -->
    </template>
  </div>

  <script>
    // 注意： 想要修改数组List的内容的时候，不能直接通过下标的方式修改(List[0])，这样数据不会是响应式的
    // 1. 只能通过vue给出的数组遍历的方式改变：
      // pop(删除最后一项) push(添加一条数据) shift(删除第一项) unshift(添加第一项)
      // splice(index, 删除的个数，添加的内容) 数组截取
      // sort(排序) reverse(数组取反)
    // 2. 改变引用,改变数组的引用地址，

    // 3. 如果列表循环中需要一个外层div来包裹，但是又不想其出现在页面之中，可以使用template模版站位符
    // 模版站位符，可以包裹一些元素，但是在列表渲染的时候，标签不会被渲染到页面上。

    // 4. 列表渲染对象
    // 如果想要添加值，只能修改引用地址。修改值，可以直接修改
    var vm = new Vue({
      el: '#root',
      data: {
        // List: [
        //   {
        //     id: '0001',
        //     text: 'hello'
        //   },
        //   {
        //     id: '0002',
        //     text: 'world'
        //   }
        // ]
        // 对象：
        userObj: {
          name: 'hhh',
          age: '22',
          male: 'gender'
        }
      }
    })
  </script>
</body>
</html>